<template>
  <div id="configureTagList">
    <el-dialog
      class="about-set"
      title="所有标签数"
      :visible.sync="tagdialogData.isShow"
      width="400px"
      :before-close="labelHandleClose"
    >
      <div class="con-title">
        <span>启用标签数/所有标签数</span>
        <template></template>
        <span class="tagsCont">{{ enabledTagCount }}/{{ tagCount }}</span>
      </div>
      <div class="bottom-box">
        <!--table-->
        <div class="table">
          <el-table height="400" v-loading="loading" :data="tableData">
            <el-table-column
              prop="labelName"
              min-width="150"
              label="标签名"
            ></el-table-column>
            <el-table-column prop="enabled" min-width="120" label="标签状态">
              <template slot-scope="scope">
                <span v-if="scope.row.enabled === true">启用</span>
                <span v-if="scope.row.enabled === false">停用</span>
              </template>
            </el-table-column>
            <el-table-column label="编辑">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.enabled === false"
                  type="text"
                  @click="handelEndabled(scope.row.id)"
                >
                  启用
                </el-button>
                <el-button
                  v-if="scope.row.enabled === true"
                  type="text"
                  @click="handelDisabld(scope.row.id)"
                >
                  停止
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="cancelLabel">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getLabelsGather,
  disable,
  enable
} from '@/api/contentTags/configureTag' // 接口
export default {
  name: 'configureTag',
  props: ['tagdialogData'],
  data() {
    return {
      loading: false,
      enabledTagCount: '',
      tagCount: '',
      tableData: []
    }
  },
  mounted() {
    this.id = this.tagdialogData.params.id
    this.enabledTagCount = this.tagdialogData.params.enabledTagCount
    this.tagCount = this.tagdialogData.params.tagCount
    this.getLabelList()
  },
  methods: {
    getLabelList() {
      let obj = {
        isRecommend: true
      }
      getLabelsGather(this.id, obj, (response) => {
        this.tableData = response
      })
    },
    // 停用
    handelDisabld(id) {
      this.$confirm(
        '停用操作会导致该标签从“推荐”/“话题”中移除，您还确认停用吗？',
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          disable(
            id,
            (response) => {
              this.$message({
                type: 'success',
                message: '已停用'
              })
              this.getLabelList()
              this.$emit('refresh')
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    // 启用
    handelEndabled(id) {
      enable(
        id,
        (response) => {
          this.$message({
            type: 'success',
            message: '已启用'
          })
          this.getLabelList()
          this.$refs.tagContent
          this.$emit('refresh')
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },

    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.tagdialogData.isShow = false
    }
  }
}
</script>
<style lang="less">
#configureTagList {
  .con-title {
    margin-bottom: 20px;
  }
  .tagsCont {
    margin-left: 50px;
    color: #009dd9;
  }
}
</style>
